// 这里面试二次分装axios 可以在这里定义一些默认配置 包括一些需要统一做拦截的处理
import axios from 'axios'
import qs from 'qs'
import Vue from 'vue'
import { Toast } from 'vant'
import router from '../router'
const vm = new Vue()
// 创建一个实例
const request = axios.create({
  baseURL: '/conner', // 已经配置好反向代理 直接源就是配置的反向代理
  timeout: 8000 // 请求的等待时间
})

// 添加一个请求的拦截器
request.interceptors.request.use(function (config) {
  // 在请求之前 做点事情
  // 这个是在请求的时候显示全局的loading状态
  vm.$showLoading()
  // 1 解决数据接口传递 参数json格式的问题
  if (config.method === 'post' && config.data) {
    config.data = qs.stringify(config.data)
  }
  // 请求头中传入token
  const token = localStorage.getItem('token')
  if (token) {
    // 请求头中 设置token 传过去
    config.headers.token = token
  }
  return config
}, function (error) {
  // 请求失败了
  vm.$hideLoading()
  return Promise.reject(error)
})

// 添加响应拦截
request.interceptors.response.use(function (response) {
  // 响应拦截 请求成功后的响应 http 2xx
  // 请求过来之后关闭loading状态
  vm.$hideLoading()
  // 这里是判断token是否过期 或者是没有token 在实际开发中大部分token过期是401 没有传是403
  if (response.data.code === 2000) {
    Toast({
      type: 'fail',
      message: '登录已过期，请从新登录',
      onClose () {
        router.push('/login')
      }
    })
  }
  return response
}, function (error) {
  vm.$hideLoading()
  // http状态码不是2xx
  return Promise.reject(error)
})

export default request
